<form:form id="add_from_book_form" action="${ctx}/topic/add" modelAttribute="addTopicVo" method="post" class="add-topic" enctype="multipart/form-data">
	<form:errors path="*" element="div" cssClass="msg-error"/>
	<input type="hidden" name="category" value="book" />
	<div class="fieldset">
		<form:textarea id="description_from_book" path="description" maxlength="500" placeholder="Describe a Scene or Moment ..." cssStyle="width: 100%; height: 60px;" />
	</div>
	<div class="fieldset">
		<input type="submit" class="btn style1 medium" name="submit" value="Add it" /><span id="description_from_book_character_count" class="mlm fsl fcl">500</span>
	</div>
</form:form>


<script type="text/javascript">

jq(document).ready(function() {

	jq('#description_from_book').bind('keyup mouseup change',function(e) {
		var cur_length = jq(this).val().length;
		jq('#description_from_book_character_count').text(500 - cur_length);
	});
	
	jq("#add_from_book_form").submit(function(e) {
		var description = jq('#description_from_book').val();
		var pos_top = jq(this).offset().top;
		if(jq.trim(description).length === 0) {
			jq.notification({ "pos_top" : pos_top, "width" : 256, "message" : "Please describe a Scene or Moment." });
			return false;
		}else if(jq.trim(description).length > 500) {
			jq.notification({ "pos_top" : pos_top, "width" : 300, "message" : "The length of description cannot be more than 500." });
			return false;
		}else {
			return true;
		}
	});
	
});

</script>
